<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    :width="width"
    :append-to-body="true"
    :modal-append-to-body="true"
    :modal="true"
    :close-on-click-modal="false"
    :lock-scroll="true"
    :show-close="false"
    class="pms-dialog"
    :visible.sync="isVisible"
  >
    <template #footer>
      <div style="height: auto;">
        <el-form ref="backPageRef" class="pms-details" :model="form" label-width="100">
          <div class="input-container">
            <span>任务名称：</span>
            <el-input
              v-model="form.taskName"
              class="pms-input"
              :style="{ width: '22%', marginRight: '30px' }"
              disabled
            />
            <span>任务年份：</span>
            <el-date-picker v-model="form.taskYear" value-format="yyyy" type="year" class="pms-el-datepicker" />
            <span v-if="form.processType === 'SC_ALL_WD_001'">任务季度：</span>
            <span v-else>任务月份：</span>
            <el-select
              v-if="form.processType === 'SC_ALL_WD_001'"
              v-model="form.taskQuarter"
              class="pms-select"
              placeholder="请选择任务季度"
              :style="{ width: '15%', marginRight: '30px' }"
            >
              <el-option
                v-for="item in form.dsLists.SIG_TASK_QUARTER"
                :key="item.dictId"
                :style="{ 'width': 135 + 'px' }"
                :label="item.dictName"
                :value="item.dictId"
              />
            </el-select>
            <el-select
              v-else
              v-model="form.taskMonth"
              class="pms-select"
              placeholder="请选择任务月份"
              :style="{ width: '15%', marginRight: '30px' }"
            >
              <el-option
                v-for="item in form.dsLists.month"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictId"
              />
            </el-select>
            <span>流程类型：</span>
            <el-select v-model="form.processType" class="pms-select" placeholder="请选择流程类型" :style="{ width: '15%' }">
              <el-option
                v-for="item in form.dsLists.SIG_PROCESS_TYPE"
                :key="item.dictId"
                :style="{ 'width': 135 + 'px' }"
                :label="item.dictName"
                :value="item.dictId"
              />
            </el-select>
          </div>
          <div class="input-container">
            <span style="color:red">主要内容*：</span>
            <el-input v-model="form.remarks" class="pms-textarea" type="textarea" placeholder="请输入主要内容" :rows="6" maxlength="300" />
          </div>
          <div class="input-container">
            <span>备注：</span>
            <el-input v-model="form.mainContent" class="pms-input" placeholder="请输入备注" maxlength="300" />
          </div>
        </el-form>
      </div>
      <div class="dialog-footer">
        <el-button
          type="primary"
          class="pms-button-primary"
          size="small"
          @click="onGenerateProcess"
        >生成批量签章流程</el-button>
        <el-button type="primary" class="pms-button-primary" @click="closeDialog">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { getDropdownData } from '@/api/common' // 字典接口
import {
  insertBasicTask
} from '@/api/attachManagement/electronicSign/electronicSignature'
export default {
  name: 'InsertProcess',
  props: {
    title: {
      type: String,
      default: '任务基础信息'
    },
    width: {
      type: String,
      default: '70%'
    }
  },
  data() {
    return {
      form: {
        taskName: '',
        taskYear: new Date().getFullYear().toString(),
        taskMonth: '',
        remarks: '',
        mainContent: '',
        taskQuarter: '',
        processType: '',
        dsLists: {} // 下拉框字典选项集合
      },
      isVisible: false
    }
  },
  mounted() {
    this.getDictData()
  },
  methods: {
    show() {
      this.isVisible = true
      this.form.remarks = ''
      this.form.mainContent = ''
    },
    closeDialog(type) {
      if (type === 'save') {
        this.$emit('refreshTable')
      }
      this.isVisible = false
    },
    onGenerateProcess() {
      this.doSave()
    },
    doSave() {
      const params = {
        mainContent: this.form.mainContent,
        processType: this.form.processType,
        processName: '',
        taskName: this.form.taskName,
        taskYear: this.form.taskYear,
        remarks: this.form.remarks
      }
      if (params.remarks === '') {
        this.$message.warning('请填写主要内容')
        return
      }
      if (this.form.processType === 'SC_ALL_WD_001') {
        params.processName = '自主研发'
        params.taskQuarter = this.form.taskQuarter
        params.taskQuarterName = this.changeDataInfo(this.form.dsLists?.SIG_TASK_QUARTER, this.form.taskQuarter)
      } 
       if (this.form.processType === 'SC_ALL_WD_002') {
        params.processName = '非自主研发'
        params.taskMonth = this.form.taskMonth
        params.taskMonthName = this.changeDataInfo(this.form.dsLists?.month, this.form.taskMonth)
      }
      insertBasicTask(params).then(res => {
        if (+res.code !== 200) {
          return Promise.reject(res)
        }
        this.$message.success(res.data)
        this.closeDialog('save')
      }).catch(error => {
        console.error('保存任务失败:', error)
      })
    },
    // 处理数据
    changeDataInfo(data, value) {
      const list = data.filter(item => item.dictId === value)
      return list[0]?.dictName
    },
    async getDictData() {
      const arr = ['SIG_TASK_QUARTER', 'SIG_PROCESS_TYPE', 'month']
      try {
        const results = await Promise.all(arr.map(item => getDropdownData(item)))
        arr.forEach((item, i) => {
          const data = results[i].data ?? []
          if (data.length > 0) {
            this.form.dsLists[item] = data
            // 设置默认选中第一个选项
            if (item === 'SIG_TASK_QUARTER') {
              this.form.taskQuarter = data[0]?.dictId || ''
            } else if (item === 'SIG_PROCESS_TYPE') {
              this.form.processType = data[0]?.dictId || ''
            } else if (item === 'month') {
              this.form.taskMonth = data[0]?.dictId || ''
            }else{
              console.log("");
            }
          }
        })
      } catch (error) {
        console.error('获取下拉框数据失败:', error)
      }
    },
    selectChange(value) {
      console.log(value)
    }
  }
}
</script>

<style scoped lang="scss">
.pms-dialog .dialog-footer {
  display: flex;
  justify-content: center;
}

.pms-button-primary {
  margin-left: 48px;
}

.input-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  align-items: center;
  justify-content: flex-end;
}

.input-container span {
  margin-right: 10px;
  white-space: nowrap;
}

.pms-input {
  width: calc(100% - 70px);
}

.pms-el-datepicker {
  margin-right: 30px;
  height: 20px;
  line-height: 20px;
}

.el-textarea__inner,
.el-input__inner {
  width: 100%;
}
</style>
